<template>
    
    <div class="person">
        <h1>情况1：监视ref定义的【基本类型】数据</h1>
        <h2>当前的求和为：{{sum}}</h2>
        <button @click="changSum">点我+1</button>
    </div>
</template>

<script setup name="Person" lang="ts">
    import { ref,watch } from 'vue';
    //数据
    let sum=ref(0);
    //函数
    function changSum(){
        sum.value+=1;
    }
    // 监视情况1：监视ref定义的【基本类型】数据，直接写数据名即可，监视的是其value值的改变。
    const stopWatch=watch(sum,(newValue,oldValue)=>{
        //箭头函数内部是sum的value值出现了变化，会执行的操作。
        console.log("sum值发生了变化",newValue,oldValue);
        if(newValue>15){
            stopWatch();
        }
    })


    
    

</script>

<style scoped>
    .person{
        background-color:aquamarine;    /*背景颜色 */
        padding: 30px; /*内边距 */
        box-shadow: 0 0 10px; /*边框阴影 */
        border-radius: 10px;
    }
</style>

